<template>
  <div class="bar-chart-11 chart" ref="barChart11"></div>
</template>

<script setup>
import { ref, onMounted, inject } from "vue";
const barChart11 = ref(null);
const echarts = inject("$echarts");

let yAxisData = [
  "部门名称1",
  "部门名称2",
  "部门名称3",
  "部门名称4",
  "部门名称5",
];
let seriesData = [203, 176, 150, 122, 87];
let colors =  ['#FED52F','#FED52F','#37D6AF','#37D6AF','#23B9FF'];
let barColors = ['rgba(254,213,47,0.32)','rgba(254,213,47,0.32)', 'rgba(55,214,175,0.32)', 'rgba(55,214,175,0.32)', 'rgba(35,185,255,0.32)'];

const option = {
  compCode: 'C202309057',
  backgroundColor: "#001019",
  grid: {
    left: "4%",
    right: "2%",
    bottom: "2%",
    top: "2%",
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
    backgroundColor: '#053962', // 设置背景色为半透明红色
    borderColor: '#165e9e', // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: '#fff'
    },
    axisPointer: {
      type: "none",
    },
    formatter: function (params) {
      return params[0].name + " : " + params[0].value;
    },
  },
  xAxis: {
    show: false,
    type: "value"
  },
  yAxis: [
    {
      type: "category",
      inverse: true,
      offset: 100,
      axisLabel: {
        show: true,
        align: "left",
        textStyle: {
          color: "#66cc00",
        },
        formatter: function (value, index) {
          let num = "";
          let str = "";
          const no = "NO.";
          num = index + 1;
          if (index === 0) {
            str = "{no1|" + no + num +"} {title|" + value + "}";
          } else if (index === 1) {
            str = "{no2|" + no  + num + "} {title|" + value + "}";
          } else if (index === 2 || index === 3) {
            str = "{no3|" + no  + num + "} {title|" + value + "}";
          } else {
            str = "{no|" + no  + num + "}  {title|" + value + "}";
          }
          return str;
        },
        rich: {
          no: {
            color: colors[4],
            fontSize: 14,
          },
          no1: {
            color: colors[0],
            fontSize: 14,
          },
          no2: {
            color: colors[1],
            fontSize: 14,
          },
          no3: {
            color: colors[2],
            fontSize: 14,
          },
          title: {
            color: "#fff",
          }
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      data: yAxisData,
    }
  ],
  series: [
    {
      name: "值",
      type: "bar",
      zlevel: 1,
      label: { // 柱子上方的数值
        show: true,
        position: 'right', // 位置
        color: '#fff',
        fontSize: 12,
        distance: 10, // 距离
      },
      itemStyle: {
        normal: {
          color: function (params) {
            let colorItem = barColors[params.dataIndex];
            return colorItem;
          }
        }
      },
      barWidth: 20,
      data: seriesData,
    }
  ],
};


onMounted(() => {
  const chart = echarts.init(barChart11.value);
  chart.setOption(option);
});
</script>

<style scoped></style>
